<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-15 17:14:10
 * @Description: 新增/编辑规则
-->
<template>
  <base-layout
    :visible-sea="false"
    :dialog-title="editIndex === -1 ? '新增规则' : '编辑规则'"
    :dialog-visible="dialogVisible"
    @dialog-close="handleClose"
    dialogWidth="60%"
  >
    <template #dialog>
      <el-form
        :model="addPerfromanceQuery"
        :rules="rules"
        ref="formRef"
        label-width="130px"
        class="demo-ruleForm"
        label-position="right"
      >
        <el-row>
          <el-col>规则</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-form-item label-width="0">
          <el-col :span="8">
            <el-form-item
              label-width="100px"
              label="规则项名称:"
              prop="ruleName"
            >
              <el-input
                placeholder="请输入规则项名称"
                :disabled="disabledForm"
                v-model="addPerfromanceQuery.ruleName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label-width="0">
          <el-col :span="8">
            <el-form-item
              label-width="100px"
              label="考核权重:"
              prop="weight"
            >
              <el-col :span="20">
                <el-input
                  placeholder="请输入考核权重"
                  :disabled="disabledForm"
                  v-model="addPerfromanceQuery.weight"
                ></el-input>
              </el-col>
              <el-col
                :span="4"
                class="nuit"
              >%</el-col>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="0"
              label=""
              prop="isWeight"
            >
              <el-switch
                active-text="是否开启权重考核"
                v-model="addPerfromanceQuery.isWeight"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                :disabled="disabledForm"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label-width="0">
          <el-col :span="8">
            <el-form-item
              label-width="100px"
              label="可叠加条件:"
              prop="isUnique"
            >
              <el-checkbox
                :value="addPerfromanceQuery.isUnique === 0"
                :true-label="0"
                :false-label="0"
                :disabled="disabledForm"
                @change="ckeckChange"
              >叠加</el-checkbox>
              <el-checkbox
                :value="addPerfromanceQuery.isUnique === 1"
                :true-label="1"
                :false-label="1"
                :disabled="disabledForm"
                @change="ckeckChange"
              >唯一</el-checkbox>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-row class="rules-btn">
          <el-col :span="14">
            <el-button
              v-for="item in assessmentTypes"
              :key="item.type"
              :type="addPerfromanceQuery.ruleType === item.type ? 'primary' : ''"
              @click="chooseType(item.type)"
              :disabled="disabledForm || (!!addPerfromanceQuery.khList.length && addPerfromanceQuery.ruleType !== item.type)"
            >{{ item.title }}</el-button>
          </el-col>
          <el-col
            :span="10"
            class="add-rules"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              :disabled="disabledForm"
              @click="addRules"
            >新增考核规则</el-button>
          </el-col>
        </el-row>
        <el-row>
          规则列表
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-form-item
          label=""
          label-width="0"
        >
          <el-col
            v-for="item in assessmentTypes"
            :key="item.type"
          >
            <data-table
              v-if="addPerfromanceQuery.ruleType === item.type"
              :width="160"
              :value="tablePageList"
              :total-count="addPerfromanceQuery.khList.length"
              :has-action="true"
              :table-column-attributes="tableColumnAttributes"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
              <template #action="{row, index}">
                <i
                  class="el-icon-document-copy"
                  title="复制"
                  style="cursor: pointer;"
                  @click="copyRules(row)"
                ></i>
                <i
                  class="el-icon-edit"
                  title="编辑"
                  style=" margin-left: 20px;cursor: pointer"
                  @click="eidtRules(row, pageSize * (currentPage - 1) + index)"
                ></i>
                <i
                  class="el-icon-delete"
                  title="删除"
                  style="color:red; margin-left: 20px;cursor: pointer"
                  @click="deleteRules(pageSize * (currentPage - 1) + index)"
                ></i>
              </template>
            </data-table>
          </el-col>
        </el-form-item>
        <el-form-item
          label="备注:"
          label-width="50px"
        >
          <el-input
            type="textarea"
            placeholder="说明：维修产值一般指当所有工单总产值超过预期目标或者达到部分预期目标的指标产值时为对应岗位员工进行绩效提成奖励。"
            :disabled="disabledForm"
            v-model="addPerfromanceQuery.remark"
          />
        </el-form-item>
        <div class="footer">
          <el-button
            type="success"
            :disabled="disabledForm"
            @click="settingSave"
          >{{ editIndex === -1 ? '新增' : '编辑' }}绩效规则</el-button>
        </div>
      </el-form>
    </template>
    <template #contentPanel>
      <addAppraisalDialog
        ref="addAppraisalDialog"
        :khList="addPerfromanceQuery.khList"
        @save="khListSave"
      />
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import addAppraisalDialog from './addAppraisalDialog.vue'
import {
  performanceAssessmentTypes,
  getRuleTableColumn
} from '@/utils/performance'
import { deepClone } from '@/utils/index'
export default {
  components: {
    addAppraisalDialog
  },
  mixins: [baseMixin({})],
  props: {
    jxgzList: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      // 编辑规则index（-1:新增）
      editIndex: -1,
      // 是否禁用（查看时禁用）
      disabledForm: false,
      // 显示/隐藏弹窗
      dialogVisible: false,
      addPerfromanceQuery: {
        // 是否唯一(1–唯一, 0–叠加)
        isUnique: 0,
        // 是否开启权重考核(1–开启, 0–不开启)
        isWeight: 0,
        // 规则名称
        ruleName: '',
        // 权重
        weight: '',
        // 考核规则
        khList: [],
        // 规则类型 0普通绩效 1 配件绩效 2 项目绩效
        ruleType: performanceAssessmentTypes.ordinary.type,
        // 备注
        remark: ''
      },
      // 表单验证规则
      rules: {
        isUnique: [{ required: true, message: '请勾选叠加条件' }],
        weight: [{ required: true, message: '请输入权重' }],
        ruleName: [{ required: true, message: '请输入规则名称' }]
      },
      // 考核类型列表
      assessmentTypes: Object.values(performanceAssessmentTypes)
    }
  },
  computed: {
    /**
     * @description: 考核规则表头配置
     * @param {*}
     * @return {*}
     */
    tableColumnAttributes() {
      return getRuleTableColumn(this.addPerfromanceQuery.ruleType)
    },
    /**
     * @description: 当前类型分页规则列表
     * @param {*}
     * @return {*}
     */
    tablePageList() {
      return this.addPerfromanceQuery.khList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    /**
     * @description: 打开弹窗
     * @param {boolean} 是否禁用
     * @param {Number} 编辑规则下标索引
     * @return {viod}
     */
    open(isDisabled = false, editIndex = -1) {
      this.editIndex = editIndex
      this.dialogVisible = true
      this.disabledForm = isDisabled
      const editInfo = this.jxgzList[editIndex] || {}
      Object.keys(editInfo).forEach(key => {
        if (this.addPerfromanceQuery.hasOwnProperty(key) && editInfo[key]) {
          this.$set(this.addPerfromanceQuery, key, editInfo[key])
        }
      })
    },
    /**
     * @description: 关闭弹窗
     * @param {*}
     * @return {viod}
     */
    handleClose() {
      this.dialogVisible = false
      this.addPerfromanceQuery = {
        isUnique: 0,
        isWeight: 0,
        ruleName: '',
        weight: '',
        khList: [],
        ruleType: performanceAssessmentTypes.ordinary.type,
        remark: ''
      }
      this.$emit('set-visible', false)
    },
    /**
     * @description: 复选框选择状态修改处理
     * @param {boolean} value
     * @return {*}
     */
    ckeckChange(value) {
      this.addPerfromanceQuery.isUnique = value
    },
    /**
     * @description: 选择考核类型
     * @param {number} type
     * @return {*}
     */
    chooseType(type) {
      this.$set(this.addPerfromanceQuery, 'ruleType', type)
    },
    /**
     * @description: 复制规则
     * @param {Object} 记录信息
     * @return {viod}
     */
    copyRules(row) {
      if (this.disabledForm) {
        return
      }
      this.addPerfromanceQuery.khList.push(row)
    },
    /**
     * @description: 编辑规则
     * @param {Object} 规则信息
     * @return {*}
     */
    eidtRules(row, index) {
      if (this.disabledForm) {
        return
      }
      this.$refs.addAppraisalDialog.open(this.addPerfromanceQuery.ruleType, row, index)
    },
    /**
     * @description: 删除规则
     * @param {*} row
     * @return {*}
     */
    deleteRules(index) {
      if (this.disabledForm) {
        return
      }
      const list = this.addPerfromanceQuery.khList || []
      list.splice(index, 1)
      const currentPageAll = Math.ceil(list.length / this.pageSize) || 1;
      if (currentPageAll < this.currentPage) {
        this.currentPage = this.currentPage - 1
      }
    },
    /**
     * @description: 添加绩效规则
     * @param {*}
     * @return {*}
     */
    addRules() {
      this.$refs.addAppraisalDialog.open(this.addPerfromanceQuery.ruleType)
    },
    /**
     * @description: 添加k考核规则保存回调
     * @param {Object} 规则信息
     * @param {Number} 编辑规则下标（-1: 新增）
     * @return {*}
     */
    khListSave(info, index) {
      if (-1 !== index) {
        this.$set(this.addPerfromanceQuery.khList, index, info)
      } else {
        this.addPerfromanceQuery.khList.push(info)
      }
    },
    /**
     * @description: 保存设置
     * @param {*}
     * @return {viod}
     */
    settingSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$emit('save', this.addPerfromanceQuery, this.editIndex)
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 0;
  padding: 0;
  overflow: hidden;
}
.footer {
  margin-top: 20px;
  text-align: right;
}
.add-rules {
  text-align: right;
}
.nuit {
  text-align: center;
}
.rules-btn {
  padding-bottom: 20px;
}
</style>
